﻿@{
    var zixun = ViewBag.Active as List<TZL.Data.News>;
}
<style type="text/css">
    #map {
        width: 100%;
        height: 400px;
    }
</style>

<!--=== End Header ===-->
<!--=== Slider ===-->
<div class="tp-banner-container">
    <div class="tp-banner">
        <ul>
            <!-- SLIDE -->
            @if (ViewBag.Banner != null)
            {
                foreach (var item in ViewBag.Banner)
                {
                    <li class="revolution-mch-1" data-transition="fade" data-slotamount="5" data-masterspeed="1000" data-title="@item.Title">
                        <img src="@item.Content" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                        <div class="tp-caption revolution-ch1 sft start"
                             data-x="center"
                             data-hoffset="0"
                             data-y="100"
                             data-speed="1500"
                             data-start="500"
                             data-easing="Back.easeInOut"
                             data-endeasing="Power1.easeIn"
                             data-endspeed="300">
                            @Html.Raw(item.Title)
                        </div>
                        <div class="tp-caption revolution-ch2 sft"
                             data-x="center"
                             data-hoffset="0"
                             data-y="190"
                             data-speed="1400"
                             data-start="2000"
                             data-easing="Power4.easeOut"
                             data-endspeed="300"
                             data-endeasing="Power1.easeIn"
                             data-captionhidden="off"
                             style="z-index: 6">
                            @Html.Raw(item.Description)
                        </div>
                        <div class="tp-caption sft"
                             data-x="center"
                             data-hoffset="0"
                             data-y="310"
                             data-speed="1600"
                             data-start="2800"
                             data-easing="Power4.easeOut"
                             data-endspeed="300"
                             data-endeasing="Power1.easeIn"
                             data-captionhidden="off"
                             style="z-index: 6">
                            <a href="@item.Link" class="btn-u btn-brd btn-brd-hover btn-u-light">Our Work</a>
                        </div>
                    </li>
                }
            }
            <!-- END SLIDE -->
        </ul>
        <div class="tp-bannertimer tp-bottom"></div>
    </div>
</div>
<!--=== End Slider ===-->
<!--=== Content Part ===-->
<!-- Easy Blocks v1 -->

<div id="Newslist" class="container content-md" style="padding-top:10px;padding-bottom: 0px;">
    <div class="headline margin-bottom-35"><h2>最新新闻</h2></div>
    <div align="center" id="demo" class="tab-v2 tab-content">
        <div id="demo1" style="text-align:left">
        </div>
        <div id="demo2" style="text-align:left"></div>
    </div>
    <div class="clearfix"></div>
</div>

<div class="container content-md" style="padding-top:10px;padding-bottom: 0px;">
    <div class="headline margin-bottom-35"><h2>最新资讯</h2></div>
    @*<div class="row high-rated margin-bottom-5">*@

    @if (zixun != null)
    {

        int i = 0;
        foreach (var item in zixun)
        {
            if (i == 0 || i == 4)
            {
                @Html.Raw("<div class='row high-rated margin-bottom-5' style='margin-left:60px;'>")
            }
            <div class="col-md-3 col-sm-6 md-margin-bottom-10">
                <div class="easy-block-v1">
                    <div class="easy-block-v1-badge rgba-default">@item.Tag</div>
                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                        <div class="item active">
                            <img alt="" src="@item.ImgUrl">
                        </div>
                    </div>
                    <div class="overflow-h">
                        <h4>@item.Title</h4>
                    </div>
                    <a class="btn-u btn-u-sm" href="/News/Detail/@item.NewId">查看更多内容</a>
                </div>
            </div>
            if (i == 3 || i == 7 || i == zixun.Count)
            {
                @Html.Raw("</div>")
            }
            i++;
        }
    }
</div>
<!-- End Easy Blocks v1 -->
<!--=== 名校 ===-->
@*<div class="container content-md" style="padding-top: 0px; padding-bottom: 0px;">
    <div class="text-center margin-bottom-30">
        <h2 class="title-v2 title-center">名校</h2>
        <p class="space-lg-hor">
            If you are going to use a
            <span class="color-VollettePink">passage of Lorem Ipsum</span>
            , you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making
            <span class="color-VollettePink">this the first</span>
            true generator on the Internet.
        </p>
    </div>
    <div class="cube-portfolio container margin-bottom-20">
        <div class="margin-bottom-30">
            <div id="filters-container" class="cbp-l-filters-text">
                <div data-filter="*" class="cbp-filter-item cbp-filter-item-active"> ALL </div> |
                <div data-filter=".NSW" class="cbp-filter-item"> NSW </div> |
                <div data-filter=".VIC" class="cbp-filter-item"> VIC </div> |
                <div data-filter=".ACT" class="cbp-filter-item"> ACT </div> |
                <div data-filter=".QLD" class="cbp-filter-item"> QLD </div>
            </div>
        </div>
        <div id="grid-container" class="cbp-l-grid-gallery">

            @if (ViewBag.School != null)
            {
                foreach (var item in ViewBag.School)
                {
                    <div class="cbp-item @(item.Tag)">
                        <a href="/home/SchoolDetail/@item.NewId" class="cbp-caption cbp-singlePageInline"
                           data-title="@item.Title">
                            <div class="cbp-caption-defaultWrap">
                                <img src="@item.ImgUrl" alt="" style="height:233px; width:373px">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">@item.Title</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                }
            }
        </div>/end Grid Container
    </div>
</div>*@
<div class="container content-md" id="huodong" style="padding-top: 0px;">
    <div class="headline"><h2>活动</h2></div>
    <div class="row margin-bottom-20">
        @*<div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="caption">
                        <a class="btn-more hover-effect" href="#">read more +</a>
                        <h3><a class="hover-effect" href="#">Project One</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">

                        </div>

                    </div>
                    <div class="caption">
                        <a class="btn-more hover-effect" href="#">read more +</a>
                        <h3><a class="hover-effect" href="#">Project Two</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">

                        </div>

                    </div>
                    <div class="caption">
                        <a class="btn-more hover-effect" href="#">read more +</a>
                        <h3><a class="hover-effect" href="#">Project Three</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="thumbnails thumbnail-style thumbnail-kenburn">
                    <div class="thumbnail-img">
                        <div class="overflow-hidden">

                        </div>

                    </div>
                    <div class="caption">
                        <a class="btn-more hover-effect" href="#">read more +</a>
                        <h3><a class="hover-effect" href="#">Project Four</a></h3>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
                    </div>
                </div>
            </div>*@
    </div>
</div>
<div class="container" id="huodong2" style="padding-top: 0px;">
    <div class="headline"><h2>活动</h2></div>
    <div class="row margin-bottom-20">       
    </div>
</div>
<div class="container content-md" id="liuxue" style="padding-top: 0px;">
    <div class="headline"><h2>留学</h2></div>
    <div class="row margin-bottom-20">
    </div>
</div>
<div class="container" id="liuxue2" style="padding-top: 0px;">
    <div class="headline"><h2>留学</h2></div>
    <div class="row margin-bottom-20">
    </div>
</div>
<div class="container content-md" id="yimin" style="padding-top: 0px;">
    <div class="headline"><h2>移民</h2></div>
    <div class="row margin-bottom-20">
       
    </div>
</div>
<div class="container" id="yimin2" style="padding-top: 0px;">
    <div class="headline"><h2>移民</h2></div>
    <div class="row margin-bottom-20">

    </div>
</div>
<div id="map" class="map">
</div><!---/map-->
@section scripts{
    <script src="http://maps.google.com/maps/api/js?file=api&v=2&key=AIzaSyCJ8ZkSE5K2ze3_r-nwy8L8Qln9e7IxLm8"></script>
    <script type="text/javascript" src="~/assets/plugins/gmap/gmap.js"></script>

    <script>

        try {

            var myPosition = { lat: -33.8053308, lng: 151.1811052 };

            var map = new google.maps.Map(document.getElementById('map'),
            {
                zoom: 15,
                center: myPosition,
                scrollwheel: false
            });

            var marker = new google.maps.Marker({
                position: myPosition,
                map: map,
                title: 'AUS'
            });

        } catch (e) {
            console.log(e)
        }
        $(function () {

            $.post('/data/SelectNews', { categoryId: 9, pageIndex: 1, pageSize: 2 }, function (data) {
                if (data) {
                    var icon = ["icon-bg-sea icon-line icon-badge", "icon-bg-red fa fa-hdd-o"]
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0 || i == 4) {
                            $("#huodong").append('<div class="row margin-bottom-20" >');
                        }

                        var title = data[i].Title.length > 14 ? data[i].Title.substring(0,14) : data[i].Title;
                        var html = '<div class="col-md-3 col-sm-6">'
                            + '<div class="thumbnails thumbnail-style thumbnail-kenburn">'
                                + '<div class="caption">'
                                    + '<a class="btn-more hover-effect" href="/News/Detail/' + data[i].NewId + '">read more +</a>'
                                    + '<h3><a class="hover-effect" href="/News/Detail/' + data[i].NewId + '">' + title + '</a></h3>'
                                    + '<p>' + data[i].Brief + '</p>'
                                + '</div>'
                            + '</div>'
                        + '</div>';
                        $("#huodong").append(html);

                        if (i == 3 || i == 7 || i == (data.length - 1)) {
                            $("#huodong").append('</div>');
                        }
                    }
                }
            })
            $.post('/data/SelectNews', { categoryId: 9, pageIndex: 1, pageSize: 8 }, function (data) {
                if (data) {
                    var icon = ["icon-bg-sea icon-line icon-badge", "icon-bg-red fa fa-hdd-o"]
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0 || i == 4) {
                            $("#huodong2").append('<div class="row margin-bottom-20" >');
                        }

                        var title = data[i].Title.length > 14 ? data[i].Title.substring(0, 14) : data[i].Title;
                        var html = '<div class="col-md-3 col-sm-6">'
                            + '<div class="thumbnails thumbnail-style thumbnail-kenburn">'
                                + '<div class="caption">'
                                    + '<a class="btn-more hover-effect" href="/News/Detail/' + data[i].NewId + '">read more +</a>'
                                    + '<h3><a class="hover-effect" href="/News/Detail/' + data[i].NewId + '">' + title + '</a></h3>'
                                    + '<p>' + data[i].Brief + '</p>'
                                + '</div>'
                            + '</div>'
                        + '</div>';
                        $("#huodong2").append(html);

                        if (i == 3 || i == 7 || i == (data.length - 1)) {
                            $("#huodong2").append('</div>');
                        }
                    }
                }
            })

            $.post('/data/SelectNews', { categoryId: 5, pageIndex: 1, pageSize: 2 }, function (data) {
                if (data) {
                    var icon = ["icon-bg-sea icon-line icon-badge", "icon-bg-red fa fa-hdd-o"]
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0 || i == 4) {
                            $("#liuxue").append('<div class="row margin-bottom-20" >');
                        }

                        var title = data[i].Title.length > 14 ? data[i].Title.substring(0, 14) : data[i].Title;
                        var html = '<div class="col-md-3 col-sm-6">'
                            + '<div class="thumbnails thumbnail-style thumbnail-kenburn">'
                                + '<div class="caption">'
                                    + '<a class="btn-more hover-effect" href="/News/Detail/' + data[i].NewId + '">read more +</a>'
                                    + '<h3><a class="hover-effect" href="/News/Detail/' + data[i].NewId + '">' + title + '</a></h3>'
                                    + '<p>' + data[i].Brief + '</p>'
                                + '</div>'
                            + '</div>'
                        + '</div>';
                        $("#liuxue").append(html);

                        if (i == 3 || i == 7 || i == (data.length - 1)) {
                            $("#liuxue").append('</div>');
                        }
                    }
                }
            })
            $.post('/data/SelectNews', { categoryId: 5, pageIndex: 1, pageSize: 8 }, function (data) {
                if (data) {
                    var icon = ["icon-bg-sea icon-line icon-badge", "icon-bg-red fa fa-hdd-o"]
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0 || i == 4) {
                            $("#liuxue2").append('<div class="row margin-bottom-20" >');
                        }

                        var title = data[i].Title.length > 14 ? data[i].Title.substring(0, 14) : data[i].Title;
                        var html = '<div class="col-md-3 col-sm-6">'
                            + '<div class="thumbnails thumbnail-style thumbnail-kenburn">'
                                + '<div class="caption">'
                                    + '<a class="btn-more hover-effect" href="/News/Detail/' + data[i].NewId + '">read more +</a>'
                                    + '<h3><a class="hover-effect" href="/News/Detail/' + data[i].NewId + '">' + title + '</a></h3>'
                                    + '<p>' + data[i].Brief + '</p>'
                                + '</div>'
                            + '</div>'
                        + '</div>';
                        $("#liuxue2").append(html);

                        if (i == 3 || i == 7 || i == (data.length - 1)) {
                            $("#liuxue2").append('</div>');
                        }
                    }
                }
            })

            $.post('/data/SelectNews', { categoryId: 7, pageIndex: 1, pageSize: 2 }, function (data) {
                if (data) {
                    var icon = ["icon-bg-sea icon-line icon-badge", "icon-bg-red fa fa-hdd-o"]
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0 || i == 4) {
                            $("#yimin").append('<div class="row margin-bottom-20" >');
                        }

                        var title = data[i].Title.length > 14 ? data[i].Title.substring(0, 14) : data[i].Title;
                        var html = '<div class="col-md-3 col-sm-6">'
                            + '<div class="thumbnails thumbnail-style thumbnail-kenburn">'
                                + '<div class="caption">'
                                    + '<a class="btn-more hover-effect" href="/News/Detail/' + data[i].NewId + '">read more +</a>'
                                    + '<h3><a class="hover-effect" href="/News/Detail/' + data[i].NewId + '">' + title + '</a></h3>'
                                    + '<p>' + data[i].Brief + '</p>'
                                + '</div>'
                            + '</div>'
                        + '</div>';
                        $("#yimin").append(html);

                        if (i == 3 || i == 7 || i == (data.length - 1)) {
                            $("#yimin").append('</div>');
                        }
                    }
                }
            })
            $.post('/data/SelectNews', { categoryId: 7, pageIndex: 1, pageSize: 8 }, function (data) {
                if (data) {
                    var icon = ["icon-bg-sea icon-line icon-badge", "icon-bg-red fa fa-hdd-o"]
                    for (var i = 0; i < data.length; i++) {
                        if (i == 0 || i == 4) {
                            $("#yimin2").append('<div class="row margin-bottom-20" >');
                        }

                        var title = data[i].Title.length > 14 ? data[i].Title.substring(0, 14) : data[i].Title;
                        var html = '<div class="col-md-3 col-sm-6">'
                            + '<div class="thumbnails thumbnail-style thumbnail-kenburn">'
                                + '<div class="caption">'
                                    + '<a class="btn-more hover-effect" href="/News/Detail/' + data[i].NewId + '">read more +</a>'
                                    + '<h3><a class="hover-effect" href="/News/Detail/' + data[i].NewId + '">' + title + '</a></h3>'
                                    + '<p>' + data[i].Brief + '</p>'
                                + '</div>'
                            + '</div>'
                        + '</div>';
                        $("#yimin2").append(html);

                        if (i == 3 || i == 7 || i == (data.length - 1)) {
                            $("#yimin2").append('</div>');
                        }
                    }
                }
            })

        })


        loadScroll();
        function loadScroll() {
            $.post('/data/SelectAllNews', { pageIndex: 1, pageSize: 10 }, function (data) {

                if (data) {
                    var html = [];
                    for (var key in data) {
                        html.push(data[key].Title + '<br>')
                    }

                    $("#demo1").html(html.join(''))
                    scrollgo();
                }
            })
        }


        function scrollgo() {

            var demo = document.getElementById("demo");
            var demo1 = document.getElementById("demo1");
            var demo2 = document.getElementById("demo2");
            var speed = 50;    //数值越大滚动速度越慢
            demo2.innerHTML = demo1.innerHTML;
            demo.scrollTop = demo.scrollHeight + 'px';

            function Marquee() {
                var i = demo.scrollTop;
                demo.scrollTop++;
                //向下的无缝循环滚动
                if (demo2.offsetTop - demo.scrollTop <= 0 || i == demo.scrollTop)    //当滚动至demo1与demo2交界时
                {
                    demo.scrollTop -= demo1.offsetHeight;    //demo跳到最顶端
                }
                //else{
                //    demo.scrollTop++;
                //}
            }
            var MyMar = setInterval(Marquee, speed);
            demo.onmouseover = function () { clearInterval(MyMar) }
            demo.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
        }
    </script>
}

